<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
import * as echarts from "echarts";
import { useScreenStore } from "@/store/modules/screen";

const screenStore = useScreenStore();

const chartRef = ref(null);
let chartInstance = null;

// 计算属性：从 store 中获取 equipments 数据并转换为图表格式
const chartData = computed(() => {
  const equipments = screenStore.equipments;
  if (!equipments || equipments.length === 0) {
    return {
      dataX: ["这是实验器材名称1", "这是实验器材名称2", "这是实验器材名称3", "这是实验器材名称4", "这是实验器材名称5", "这是实验器材名称6", "这是实验器材名称7"],
      dataY1: [120, 200, 150, 80, 70, 110, 130],
      dataY2: [80, 90, 100, 130, 140, 180, 210],
    };
  }

  // 处理 equipments 数据，按器材名称分组
  const equipmentMap = new Map();

  equipments.forEach(item => {
    const name = item.x || '未知器材';
    if (!equipmentMap.has(name)) {
      equipmentMap.set(name, { sales: 0, repair: 0 });
    }

    const equipment = equipmentMap.get(name);
    if (item.type === '销售数量') {
      equipment.sales = item.y || 0;
    } else if (item.type === '报修数量') {
      equipment.repair = item.y || 0;
    }
  });

  const dataX = Array.from(equipmentMap.keys());
  const dataY1 = dataX.map(name => equipmentMap.get(name).sales);
  const dataY2 = dataX.map(name => equipmentMap.get(name).repair);

  return {
    dataX,
    dataY1,
    dataY2
  };
});

// 封装初始化图表的函数
const initChart = () => {
  if (chartInstance) chartInstance.dispose(); // 销毁旧实例
  chartInstance = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "24%",
      left: "2%",
      right: "2%",
      bottom: "10%",
      containLabel: true,
    },
    legend: {
      show: true,
      left: "0%",
      top: "2%",
    },
    xAxis: {
      boundaryGap: true,
      data: chartData.value.dataX,
      axisLine: {
        lineStyle: {
          color: "#E6EBF1",
          fontSize: 12,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#8C8C8C",
      },
    },
    yAxis: {
      name: "次数",
      type: "value",
      nameTextStyle: {
        color: "#8C8C8C",
        fontSize: 12,
      },
      inverse: false,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#E6EBF1",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#8C8C8C",
          fontSize: 14,
        },
      },
      axisTick: {
        show: false,
      },
    },

    series: [
      {
        name: "销售数量",
        type: "bar",
        barWidth: 36,
        stack: "machine",
        data: chartData.value.dataY1,
      },
      {
        name: "报修数量",
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
        },
        barWidth: 36,
        stack: "machine",
        data: chartData.value.dataY2,
      },
    ],
  };
  chartInstance.setOption(option);
};

onMounted(() => {
  // 组件挂载时初始化图表
  if (chartRef.value) {
    initChart();
  }

  // 响应式resize
  const handleResize = () => chartInstance && chartInstance.resize();
  window.addEventListener("resize", handleResize);
  onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
    chartInstance && chartInstance.dispose();
  });
});

// 监听数据变化，重新渲染图表
watch(
  () => chartData.value,
  () => {
    if (chartInstance && chartRef.value) {
      initChart();
    }
  },
  { deep: true }
);
</script>

<style scoped>
.chart-container {
  width: 100%;
  /* 自适应父容器宽度 */
  height: 100%;
}
</style>
